<div class="pure-view-container">

  <div class="x-view-title">
    ${t('ui.example.example2Search.title.example2')}
  </div>

  <!-- 查询条件 -->
  <div class="x-search-bar">
    <form>
      <div class="form-row align-items-center">
        <!-- 名称 -->
        <div class="col-auto">
          <label class="sr-only" for="exampleName"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.example.example2Search.queryField.exampleName')}</div>
            </div>
            <input type="text" class="form-control" id="exampleName" data-x-name="searchField.exampleName"
              data-x-type="autoTrimText">
          </div>
        </div>
        <!-- 备注 -->
        <div class="col-auto">
          <label class="sr-only" for="remark"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.example.example2Search.queryField.remark')}</div>
            </div>
            <input type="text" class="form-control" id="remark" data-x-name="searchField.remark"
              data-x-type="autoTrimText">
          </div>
        </div>
        <!-- 创建日期从 -->
        <div class="col-auto">
          <label class="sr-only" for="createdDateFrom"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.example.example2Search.queryField.createdDateFrom')}</div>
            </div>
            <input type="text" class="form-control" id="createdDateFrom" data-x-name="searchField.createdDateFrom"
              data-x-type="dateTimeText" data-x-ui="createdDateFrom">
          </div>
        </div>
        <!-- 创建日期至 -->
        <div class="col-auto">
          <label class="sr-only" for="createdDateTo"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.example.example2Search.queryField.createdDateTo')}</div>
            </div>
            <input type="text" class="form-control" id="createdDateTo" data-x-name="searchField.createdDateTo"
              data-x-type="dateTimeText" data-x-ui="createdDateTo">
          </div>
        </div>
        <!-- 是否启用 -->
        <div class="col-auto">
          <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" id="enableFlagOnly" data-x-name="searchField.enableFlagOnly"
              data-x-type="checkbox-boolean">
            <label class="form-check-label" for="enableFlagOnly">
              ${t('ui.example.example2Search.queryField.enableFlagOnly')}
            </label>
          </div>
        </div>
        <!-- 查询按钮 -->
        <div class="col-auto">
          <button type="button" class="btn btn-primary mb-2" data-x-ui="searchBtn">
            ${t('ui.example.example2.btn.search')}</button>
        </div>
      </div>
    </form>
  </div>
  <!-- END 查询条件 -->


  <div class="x-tool-bar">
    <button type="button" class="btn btn-outline-primary mb-2 btn-sm" data-x-ui="createBtn">
      ${t('ui.example.example2.btn.createBtn')}
    </button>
    <button type="button" class="btn btn-outline-primary mb-2 btn-sm" data-x-ui="batchDeleteBtn" disabled>
      ${t('ui.example.example2.btn.batchDeleteBtn')}
    </button>
  </div>

  <!-- 表格 -->
  <table class="x-table-custom">
    <thead>
      <tr>
        <th data-checkbox="true"></th>
        <th data-field="id">${t('ui.example.example2.field.id')}</th>
        <th data-field="exampleName">${t('ui.example.example2.field.exampleName')}</th>
        <th data-field="remark">${t('ui.example.example2.field.remark')}</th>
        <th data-field="enableFlagDesc">${t('ui.example.example2.field.enableFlag')}</th>
        <th data-field="createdDate">${t('ui.example.example2.field.createdDate')}</th>
        <th>${t('ui.example.example2.field.operate')}</th>
      </tr>
    </thead>
  </table>
  <!-- END 表格 -->
</div>
<script src="${appJs('app/example/example2/example2-search/example2-search-service.js')}"
  type="text/javascript"></script>
<script src="${appJs('app/example/example2/example2-search/example2-search-main.js')}" type="text/javascript"></script>